<script setup lang="ts">
import {useRouter} from 'vue-router'
import {useUserStore} from '@/store/user'

const router = useRouter()
const userStore = useUserStore()

const dropdownOptions = [
  {label: '个人中心', key: 'profile'},
  {label: '退出', key: 'logout'}
]

const handleSelect = (key: string) => {
  if (key === 'profile') {
    router.push('/profile')
  } else if (key === 'logout') {
    logout()
  }
}

const logout = () => {
  userStore.logout()
}
</script>

<template>
  <n-layout-header style="height: 64px; padding: 24px;" bordered>
    <div class="flex items-center justify-between w-full h-full">
      <div class="flex items-center">
        <img class="w-9 h-9" src="@/assets/naivelogo.svg" alt="logo"/>
        <span class="text-lg ml-2">Naive UI</span>
      </div>
      <n-dropdown
          trigger="click"
          :options="dropdownOptions"
          @select="handleSelect"
      >
        <div class="flex items-center gap-2 cursor-pointer">
          <n-avatar
              round
              size="small"
              :src="userStore.avatar || '@/assets/naivelogo.svg'"
          />
          <span class="text-gray-800 font-medium">
            {{ userStore.nickName || '管理员' }}
          </span>
        </div>
      </n-dropdown>
    </div>
  </n-layout-header>
</template>

<style scoped>
</style>